<template>
  <div class="layout">
    <div class="top flex items-center justify-between px-5">
      <h1 class="text-4xl cursor-pointer">逼盘</h1>
      <span class="cursor-pointer" @click="router.push('/main')">{{isLogin ? userInfo.username : '登录' }}</span>
    </div>
    <!-- 列表页 -->
    <div class="main flex justify-center">
      <div class="w-[993px] h-full">
        <!-- title -->
        <div class="main-title h-[141px] flex justify-center items-center text-[33px]">
          分享文件列表
        </div>
        <!-- 分割线 -->
        <div class="d2"></div>
        <!-- 真正的列表 -->
        <ShareUrlList v-for="(list,index) in itemList" :key="list.id" :item="list" :index="index"
          @itemClick="handlerClick" :isLogin="isLogin"></ShareUrlList>
        <el-empty description="链接失效了!" v-if="isNone" />
      </div>
    </div>

    <!-- 弹窗保存目录 -->
    <el-dialog v-model="dialogTableVisible" title="保存文件至网盘" width="500px" v-if="isLogin">
      <el-scrollbar height="200px">
        <AbTree :list="dirList"></AbTree>
      </el-scrollbar>
      <template #footer>
        <div class="p-3">
          <el-button type="primary" size="small" @click="handleSave">确定</el-button>
          <el-button type="info" size="small" @click="dialogTableVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup>
import ShareUrlList from '@/components/shareurl-list/index.vue'
import AbTree from '@/components/ab-tree/index.vue'
import { useRouter, } from 'vue-router'
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getCurrentShare, getDownload, getDirlist, postSvae } from '@/service/api'
import userStore from '@/stores/user'


const router = useRouter()
const Store = userStore()


const fromList = (list: any[]) => {
  return list.map((item: any) => {
    item.type = item.ext === '' ? 'dir' : item.ext.substring(0, item.ext.lastIndexOf('/'))
    return item
  })
}


const isNone = ref(false)
const dialogTableVisible = ref(false)
const raw = ref([])
const itemList = computed(() => fromList(raw.value))
const userInfo: any = computed(() => Store.user)
const isLogin = computed(() => (userInfo.value as any)?.id ? true : false)
const dirList = ref<any[]>([])

const query: any = router.currentRoute.value.query
if (!query.key) {
  isNone.value = true
}

// 请求数据
getCurrentShare(query.key).then(res => {
  raw.value = res.data.data
}).catch(() => {
  isNone.value = true
})

// 监听事件
const handlerClick = (e: { item: any, type: string }) => {
  switch (e.type) {
    case 'download':
      // 下载
      download(e.item.url, e.item.name)
      break;
    case "save":
      dialogTableVisible.value = true
      break
  }
}

const handleSave = async () => {
  try {
    const dir_id = Store.activeIndex
    const res = await postSvae({ dir_id, sharedurl: query.key })
    ElMessage({ message: res.data.data })
    dialogTableVisible.value = false
    Store.$patch({
      activeIndex: 0
    })
  } catch (error: any) {
    // 懒得写，我的程序不可能有bug!!!!!!
  }


}

const download = async (url: string, name: string) => {
  const res = await getDownload(url)
  if (!res.data) {
    ElMessage({
      message: '服务器错误,稍后重试!',
      type: "warning"
    })
    return
  }
  const URL = window.URL.createObjectURL(new Blob([(res.data as any)]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = URL

  link.setAttribute('download', name)
  link.click()
}

if (isLogin.value) {
  getDirlist().then(res => {
    dirList.value = [{ id: 0, name: '根目录', children: res.data.data }]
  })
}



</script>

<style scoped>
.d2 {
  line-height: 43px;
  border-top: 1px solid #EEEEEE;
  padding: 28px 10px 16px 10px;
}

.layout {
  height: 100vh;
  width: 100vw;
}

.top {
  height: 47px;
  background: #FFF0DF;
  box-shadow: 0 0 5px #b1b1b1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.main {
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>